<template>
  <div>
    <div class="node" v-has="{action: 'iot:real:gun:list', effect: 'move'}">
    <Panel title="充电桩统计" useBack>
     
    <div slot="body" class="">
      <div class="sear" >
        <div class="line-title"></div>
        <div class="selectBox">
              <label>站点：</label>
              <el-select
              style="width:160px"
              v-model="site"
              clearable
              @change="getQueryData"
              placeholder="请选择"
              >
              <el-option  v-for="item of siteList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"></el-option>
              </el-select>
          </div>
          <div style="display:flex"><el-button class="resh" type="primary" plain @click="getQueryData">刷新数据</el-button> 
          </div>
    </div>
    <div class="gun">
               <div :class="item.state ? 'gun-item border'+item.state:'gun-item'" v-for="(item, index) in tableData" :key="index">
                   <div class="detail">
                       <span>{{item.pileId}} </span>
                       <div class="line-div">
                           <span>今日电量(KW)：<span  class="numbers">{{item.dayPower}}</span></span>
                       </div>
                        <div>
                           <span>总用电量(KW)：<span class="numbers">{{item.totalPower}}</span></span>
                           
                       </div>
                       <div>
                           <span>今日充电时间(小时)：<span class="numbers">{{item.dayTime}}</span> </span>
                           
                       </div>
                       <div>
                           <span>总充电时间(小时)： <span class="numbers">{{item.totalTime}}</span> </span>
                       </div>
                        <div>
                           <span>最后一次更新时间： <span class="numbers">{{item.lastUpdateTime }}</span> </span>
                       </div>
                   </div>
               </div>
      </div>
      <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </div>
    </Panel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'iot:real:gun:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { numToStringTime } from '@/tools/array.js'
export default {
  name: "iotRealPileList",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput
  },
  data() {
    return {
      tableData: [],
      site:'',
      siteList:[],
      query: {
        page: 1
      },
      pile:'',
       pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      name: '',
      operation: true,
    };
  },
  created() {
    if(this.$route.query.id){
      this.site = this.$route.query.id
    }
    this.getQueryData();
  },
  mounted(){
    this.iotSite()
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "充电桩id",
            type: "text",
            prop: "pileId",
            align: "center"
          },
          {
            label: "今日电量(kw/h)",
            type: "text",
            prop: "dayPower",
            align: "center"
          },
          {
            label: "总电量(kw/h)",
            type: "text",
            prop: "totalPower",
            align: "center"
          },
          {
            label: "今日充电分钟数",
            type: "text",
            prop: "totalTime",
            align: "center"
          },
          {
            label: "总计",
            type: "text",
            prop: "totalCost",
            align: "center"
          },
          {
            label: "总计时间",
            type: "text",
            prop: "totalTime",
            align: "center"
          },
          {
            label: "是否离网",
            type: "other",
            prop: "offNetwork",
            align: "center",
            fnc: val => val  ? '正常': '离网',
            class: val => val ? 'agree': 'out-off'
          },
          {
            label: "更新时间",
            type: "text",
            prop: "lastUpdateTime",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    async getQueryData() {
      let page = this.pager.current
      let pile = this.site
      let seach = { page, pile}
      const res = await request({
        url: "/iot/real/pile/list",
        method: "POST",
        data: seach
      });
      let data = res.page.list
      data.map(item => {
        item.dayTime = numToStringTime(item.dayPower)
        item.totalTime = numToStringTime(item.totalTime)
        return
      })
      let dataNew = data.sort(function (a, b) {
      return b.dayPower - a.dayPower;
    });
      this.tableData = dataNew
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
    },
    pageChange(val) {
      this.pager.current = val;
      this.getQueryData();
    },
    changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
    //获取站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/select",
      method: "POST",
      data: {}
      });
      this.siteList = list
    },
  },
  
}
</script>
<style lang='scss'>
.title-box {
    display: flex;
    align-items: center;
    .type-box {
        padding: 10px 5px;
        border-radius: 7px;
        color: #fff;
        margin-right: 5px;
        font-size: 14px;
    }
    .all{
        background: #fff;
        color: #19c5e0;
        border: 1px solid #19c5e0;
    }
}
.gun {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    color: #6f6f6f;
}
.gun-item {
    display: flex;
    width: 340px;
    border: 2px solid #b9c7cf;
    margin-right: 8px;
    border-radius: 5px;
    padding: 10px 10px 20px 10px;
    // height: 132px;
    margin-bottom: 20px;
    justify-content: space-between;
    .imgbox {
        height: 113px;
        width: 100px;
        align-items: flex-start;
        justify-content: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
        .left-text {
            margin-left: 16px;
        }
        .charge-img {
            height: 87px;
        }
        .ab-soc {
            position: absolute;
            color: #a14e1e;
            font-weight: bold;
            top: 30px;
            left: 19px;
        }
        .ab-text {
            position: absolute;
            color: #687b81;
            bottom: -10px;
            font-size: 12px;
            left: 36%;
            transform: translateX(-50%);
        }
    }
    .detail {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 8px;
        color: #092638;
        font-size: 14px;
        .tinfzhi {
            padding: 3px 19px;
            background: #5dd6f1;
            text-align: center;
            color: #fff;
            border-radius: 4px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid #5dd6f1;
        }
    }

}
.soc{ 
    font-weight: bold;
    color: #ce4300;
}
.border1 {
    border: 1px solid #a4de87;
}
.border2, .border3 {
    border: 1px solid #2ba6e0;
}
.border4 {
    border: 1px solid #f55ab9;
}
.border5, .border6 {
    border: 1px solid #a09c9c;
}
.lines {
    height: 15px;
    width: 2px;
    background: #ccdde6;
    display: block;
    margin: auto 4px;
    border-radius: 10px;
}
.line-title {
    border-radius: 2px;
    width: 8px;
    height: 25px;
    background-image: linear-gradient(90deg, #ef8b09, #fffdf5);
    margin: auto 4px;
}
.sear {
    display: flex;
    align-items: center;
    padding-top: 20px;
}
.resh {
    height: 34px;
    margin-left: 34px;
    display: flex;
    align-items: center;
}
.line-div{
    display: flex;
    // justify-content: space-around;
}
.chargeBtn{
    border: 1px solid #5dd6f1;
    background: #fff;
    border-radius: 4px;
    color: #5dd6f1;
    padding: 3px;
    
}
.chargeOrder {
    background: #e6f7ff;
    border-radius: 4px;
    padding: 18px 7px;
    color: #040404;
}
.numbers {
    font-weight: 700;
    color: #423932;
}
.selectBox {
  margin: 4px 0;
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
</style>